<!-- 电影列表 -->
<template>
  <div class="mv-body">
    <!-- 添加骨架屏效果开始 -->
    <div class="loading" v-if="isLoading">
      <van-skeleton v-for="v in 10" :key="'key' + v" title :row="3" />
    </div>
    <!-- 添加骨架屏效果结束 -->
    <!-- 刷新列表开始 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <slot :list="list"></slot>
      </van-list>
    </van-pull-refresh>
    <!-- 刷新列表结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { Skeleton, List, PullRefresh } from "vant";
import axios from "@/api/instance.js";
Vue.use(Skeleton);
Vue.use(List);
Vue.use(PullRefresh);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["type"],
  data() {
    //这里存放数据
    return {
      list: [], // 列表
      isLoading: true, // 正在加载中
      loading: false,
      finished: false, //完成
      refreshing: false, //刷新
    };
  },
  //监听属性 类似于data概念
  computed: {
    // 城市名称
    cityName: function () {
      return localStorage.getItem("cityName") || "广州";
    },
    // 城市默认id
    cityId: function () {
      return localStorage.getItem("cityId") || 20;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async onLoad() {
      // 在执行了下拉的动作后，this.refreshing
      if (this.refreshing) {
        this.list = [];
        this.offset = 0;
        this.refreshing = false;
      } else {
        //如果是上拉加载更新过，需要更新offset
        this.offset += this.limit;
      }
      await this.loadData();
      this.loading = false;
    },
    // 清空列表数据
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将loading 设置为true, 表示处理加载状态
      this.loading = true;
      this.onLoad(); //
    },
    // 加载数据
    async loadData() {
      const url =
        this.type === "hot"
          ? "/mmdb/movie/v2/list/hot.json"
          : "/mmdb/movie/v1/list/wish/order/coming.json";
      // 通过axios 请求数据
      let { limit, offset, cityName, cityId } = this;
      let result = await axios.get(url, {
        params: {
          limit,
          offset,
          ct: cityName,
          ci: cityId,
        },
      });
      //判断是否到底
      let hasMore = result?.data?.paging?.hasMore;
      console.log(hasMore);
      // 如果还有更多，就没有停止，这个时候hasMore和finished是对立管理
      this.finished = !hasMore;

      let data = result?.data || {};
      let source = this.type === "hot" ? data.hot : data.coming;
      // 更新列表
      this.list = [...this.list, ...source];
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 每次请求的条数
    this.limit = 10;
    this.offset = 0;
    // 每次的偏移量
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    // 等待请求数据的结果
    await this.loadData();
    // 控制骨架屏的显示和隐藏
    this.isLoading = false;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.mv-body {
  .loading {
    margin-top: 0.1rem;
  }
}
</style>